<template>
  <div>
    <el-cascader
      v-model="options"
      :options="options"
      :props="props"
      @change="handleChange"
    ></el-cascader>
  </div>
</template>

<script>
import { categories } from "@/utils/api";
import { reactive, ref, toRefs } from "@vue/reactivity";
import { ElMessage } from "element-plus";
export default {
  setup() {
    const categorieslist = reactive({
      type: 1,
      pagenum: 1,
      pagesize: 10,
    });
    const state = reactive({
      options: [],
      props:{
          value:"cat_id",
          label:'cat_name',
          children:'children'
      }
    });
    const getlist = async () => {
      const { data: res } = await categories(categorieslist);
      if (res.meta.status !== 200) {
        return ElMessage.error({
          message: "请求失败",
        });
      }
      state.options = res.data;
    };
    getlist();
    const handleChange = (value) => {
      console.log(value);
    };
    return {
      ...toRefs(state),
      handleChange,
    };
  },
};
</script> 

<style>
</style>